<template>
    <!-- 自定义底部栏 -->
    <view>
        <view class="tabbar-panel">
            <view
                v-for="(item, index) in bottomMenus"
                :key="index"
                class="tabbar-item"
                :style="{ '--color': indexNav == index ? ( customColor !== '' ? customColor : globalColor) : '' }"
                @click="tabNav(index, item)"
            >
                <view class="tabbar-img">
                    <text v-if="item.menu_unselected_icon" class="iconMulti newShopIcon">{{ item.menu_unselected_icon }}</text>
                    <view class="img-box" v-else>
                        <image style="width: 50rpx; height: 50rpx" :src="indexNav == index ? item.selectedIconPath : item.iconPath" mode="aspectFit" />
                    </view>
                </view>
                <view class="tabbar-text">
                    {{ item.menu_name }}
                </view>
                <view class="red-dot" v-if="item.count"></view>
            </view>
        </view>
        <!-- 高度补全 -->
        <view class="ft-hold"></view>
    </view>
</template>

<script>
export default {
    name: "tabBar",
    props: {
        bottomMenus: {
            type: Array,
            default() {
                return [];
            },
        },
        // 自定义颜色
        customColor: {
            type: String,
            default: ''
        }
    },
    // updated() {
    //     console.log("子组件接收的bottomMenus变化 :>> ", this.bottomMenus);
    // },
    data() {
        return {
            //   bottomMenus: [
            //     {
            //       wxapp_path: "",
            //       menu_name: "首页",
            //       is_needLogin: false,
            //       menu_unselected_icon: "\ueb4f",
            //     },
            //     {
            //       wxapp_path: "",
            //       menu_name: "项目",
            //       is_needLogin: false,
            //       menu_unselected_icon: "\ue60d",
            //     },
            //     {
            //       wxapp_path: "",
            //       menu_name: "商城",
            //       is_needLogin: false,
            //       menu_unselected_icon: "\ue699",
            //     },
            //     {
            //       wxapp_path: "",
            //       menu_name: "我的",
            //       is_needLogin: false,
            //       menu_unselected_icon: "\ue6c2",
            //     },
            //   ], // 底部菜单
            oldIndex: 0, //暂存索引
        };
    },
    computed: {
        indexNav() {
            return this.$store.getters.indexNav;
        },
    },
    created() {
        // 登录后继续跳转之前存取的索引
        uni.$on("loginSuccess", () => {
            uni.getStorageSync("AppCode") === "yzhvideo" ? "" : this.$store.commit("SET_INDEX", this.oldIndex);
        });
    },
    destroyed() {
        uni.$off("loginSuccess");
    },
    methods: {
        // 导航切换
        tabNav(index, item) {
            if (!this.isLogin && item.is_needLogin) {
                if (uni.getStorageSync("AppCode") !== "yzhvideo") {
                    uni.$emit("isNeedLoginEmit", true);
                    return;
                }

                // this.oldIndex = index;
            }
            /*   if (uni.getStorageSync("AppCode") == "yzhvideo") {
                if (!+this.teamConfig.is_staff) {
                    this.$u.toast("您还不是员工,请先申请成为员工！");
                    return;
                }
            } */
            this.$store.commit("SET_INDEX", index);
        },
    },
};
</script>

<style lang="scss">
$imgWH: 50upx;
.tabbar-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.4);
}

.tabbar-mask-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    .content {
        background-color: #ffffff;
        border-radius: 30upx 30upx 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .close {
            font-size: 70upx;
            color: #999999;
            font-weight: 700;
            transform: rotate(45deg);
            margin-top: 100upx;
        }
    }

    .show {
        animation: showContent 0.3s both;

        @keyframes showContent {
            0% {
                height: 0;
            }
            100% {
                height: 40vh;
            }
        }
    }
    .hide {
        animation: hideContent 0.3s both;

        @keyframes hideContent {
            0% {
                height: 40vh;
            }
            100% {
                height: 0;
            }
        }
    }
}

.tabbar-panel {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1upx solid #ededed;
    background-color: #ffffff;
    &.tabbar-panel-dark {
    }

    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 140upx;
        padding-bottom: 30upx;
        color: var(--color);
        position: relative;
        .red-dot {
            height: 15rpx;
            width: 15rpx;
            top: 14rpx;
            right: 34%;
            border-radius: 50%;
            background-color: red;
            position: absolute;
        }
        .tabbar-img {
            display: flex;
            align-items: center;
            justify-content: center;
            .newShopIcon {
                font-size: 52rpx;
                text-align: center;
            }
            .iconMulti {
                width: 54upx;
                height: 54upx;
            }
            .img-box {
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .add {
            background-color: #ffffff;
            transform: translateY(-30%);
            border-radius: 50%;
            width: 110upx;
            height: 110upx;
            color: #121314;
            z-index: 10001;
            .newShopIcon {
                font-size: 110upx;
                width: unset;
                height: unset;
            }
        }
        .tabbar-img-scan {
            width: $imgWH + 10upx;
            height: $imgWH + 10upx;
            display: flex;
            align-items: center;
            justify-content: center;
            image {
                width: $imgWH + 10upx;
                height: $imgWH + 10upx;
            }
        }
        .tabbar-text {
            color: var(--color);
            font-size: 22upx;
        }
    }
}

.ft-hold {
    height: $imgWH * 2.8;
}
</style>
